<template>
	<div class="article-content" data-article="{{article}}">
		<h2 class="article-title">{{article.title}}</h2>
		<!--信息-->
		<div class="article-meta">
			<span>分类 : 教程</span>
			<span>发布时间 : {{article.releaseTime | getdate}}</span>
			<span>评论 : (50)</span>
		</div>
		<!--文章内容-->
		<div class="article-content-box">{{article.content}}</div>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				article:""
			}
		},
		route:{
			data(transition){
				this.$http.get("/articleDetails" , {id:transition.to.query.id} , function(data){
					transition.next({article:data.article});
				},"JSON");
			}
		}
	};
</script>
<style scoped>
	.article-content{
		width:1000px;
		margin:0 auto;
		background:#fff;
		padding:20px 25px;
		box-sizing:border-box;
		box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);
	}
	.article-content .article-title{
		font-size:20px;
		color:#555;
		text-align:center;
	}
	.article-meta{
		width:100%;
		padding:15px 0;
		font-size:14px;
		color:#999;
		text-align:center;
	}
	.article-meta span{
		display:inline-block;
		margin:0 10px;
	}
	.article-content-box{
		width:100%;
		height:auto;
		color:#333;
		line-height:1.75;
		font-size:14px;
		color:#555;
	}
</style>
